<template>
    <div style="overflow-y: scroll;overflow-x: hidden;height: 100vh;">
        <div style="width: 90%;margin:20px auto 0;" ref="printContent">
            <div style="overflow: hidden;width: 100%;">
                <el-button type="primary" size="small" style="float: right;" v-print="printObj">打印</el-button>
            </div>
            <div style="width: 100%;margin: 10px auto;" id="print-content">
                <table class="table-1">
                    <!-- 三行三列的表格 -->
                    <tr>
                        <td colspan="4" style="font-weight: 700;padding: 10px;font-size: 20px;">委托运营（续期、终止、补充）</td>
                    </tr>
                    <tr style="background-color: #F5FAFA;">
                        <td style="text-align: right;font-weight: 700;color: #000;">合同类型:</td>
                        <td>
                            {{ projectdetail.htlx=='1'?'委托续期': projectdetail.htlx=='2'?'委托终止':projectdetail.htlx=='3'?'委托补充':''}}
                        </td>
                        <!-- <td style="text-align: right;font-weight: 700;color: #000;">房屋地址:</td>
                        <td>
                            {{ projectdetail.dz }}
                        </td> -->
                    </tr>
                    <tr style="background-color: #F6EED9;">
                        <td style="text-align: right;width: 147.9px;font-weight: 700;color: #000">房屋地址:</td>
                        <td colspan="3">
                            {{ projectdetail.dz }}
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: right;font-weight: 700;color: #000;">档案号:</td>
                        <td>
                            {{ projectdetail.dabh }}
                        </td>
                        <td style="text-align: right;font-weight: 700;color: #000;">产权单位:</td>
                        <td>
                            {{ projectdetail.cqdw }}
                        </td>
                    </tr>
                    <tr style="background-color: #F5FAFA;">
                        <td style="text-align: right;font-weight: 700;color: #000;">建筑面积:</td>
                        <td>
                            {{ projectdetail.jzmj }}
                        </td>
                        <td style="text-align: right;font-weight: 700;color: #000;">房屋性质:</td>
                        <td>
                            {{ projectdetail.fwyt }}
                        </td>
                    </tr>
                    <!-- 旧数据 -->
                    <tr>
                        <td style="text-align: right;font-weight: 700;color: #000;">受托人:</td>
                        <td>
                            {{ projectdetail.strval }}
                        </td>
                        <!-- <td style="text-align: right;font-weight: 700;color: #000;">受托期限:</td>
                        <td>
                            {{ projectdetail.stqx? projectdetail.stqx:'0'}}个月
                        </td> -->
                    </tr>
                    <tr>
                        <td style="text-align: right;font-weight: 700;color: #000;">受托起始时间:</td>
                        <td>
                            {{ projectdetail.stqssj?projectdetail.stqssj.split(' ')[0]:'' }}
                        </td>
                        <td style="text-align: right;font-weight: 700;color: #000;">受托到期时间:</td>
                        <td>
                            {{ projectdetail.stdqsj?projectdetail.stdqsj.split(' ')[0]:'' }}
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: right;font-weight: 700;color: #000;">租金分成比例:</td>
                        <td>
                            {{ projectdetail.zjfcbl }}%
                        </td>
                        <td style="text-align: right;font-weight: 700;color: #000;">维修基金比例:</td>
                        <td>
                            {{ projectdetail.wxjjbl }}%
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4" style="font-weight: 700;padding: 10px;font-size: 20px;">----------</td>
                    </tr>
                    <!-- 新数据 -->
                    <tr v-if="projectdetail.htlx=='1'">
                        <td style="text-align: right;font-weight: 700;color: #000;">受托人:</td>
                        <td>
                            {{ projectdetail.xqstrval }}
                        </td>
                        <!-- <td style="text-align: right;font-weight: 700;color: #000;">续期受托期限:</td>
                        <td>
                            {{ projectdetail.xqstqx? projectdetail.xqstqx:'0'}}个月
                        </td> -->
                    </tr>
                    <tr v-if="projectdetail.htlx=='1'">
                        <td style="text-align: right;font-weight: 700;color: #000;">续期受托起始时间:</td>
                        <td>
                            {{ projectdetail.xqstqssj?projectdetail.xqstqssj.split(' ')[0]:'' }}
                        </td>
                        <td style="text-align: right;font-weight: 700;color: #000;">续期受托到期时间:</td>
                        <td>
                            {{ projectdetail.xqstdqsj?projectdetail.xqstdqsj.split(' ')[0]:'' }}
                        </td>
                    </tr>
                    <tr style="background-color: #F5FAFA;" v-if="projectdetail.htlx == '2'">
                        <td style="text-align: right;font-weight: 700;color: #000;">终止日期:</td>
                        <td>
                            {{ projectdetail.wtzzsj ? projectdetail.wtzzsj.split(' ')[0] : '' }}
                        </td>
                        <td style="text-align: right;font-weight: 700;color: #000;">终止原因:</td>
                        <td>
                            {{ projectdetail.wtzzyy }}
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: right;" v-if="projectdetail.htlx=='1'">续期租金分成比例:</td>
                        <td v-if="projectdetail.htlx=='1'">
                            {{ projectdetail.xqzjfcbl }}%
                        </td>
                        <td style="text-align: right;" v-if="projectdetail.htlx=='1'">续期维修基金比例:</td>
                        <td v-if="projectdetail.htlx=='1'">
                            {{ projectdetail.xqwxjjbl }}%
                        </td>
                    </tr>
                    <tr style="background-color: #F5FAFA;">
                        <td style="text-align: right;font-weight: 700;color: #000;">经办人签字:</td>
                        <td :colspan="projectdetail.htlx == '1' ? '1' : '3'">
                            {{ projectdetail.jbrqz }}
                        </td>
                        <!-- <td style="text-align: right;font-weight: 700;color: #000;">是否转办件:</td>
                        <td :colspan="projectdetail.htlx == '1' ? '1' : '3'">
                            {{ projectdetail.sfzbj }}
                        </td> -->
                        <!-- <td style="text-align: right;font-weight: 700;color: #000;">盖章文件名称:</td>
                        <td>
                            {{ projectdetail.gzwjmc }}
                        </td> -->
                    </tr>
                    <tr>
                        <td style="text-align: right;font-weight: 700;color: #000;">办件事由:</td>
                        <td colspan="3">
                            {{ projectdetail.bjsy }}
                        </td>
                    </tr>
                    <tr><td colspan="4"></td></tr>
                </table>
                <table class="table-1">
                    <tr><td colspan="5" style="font-weight: 700;">文件</td></tr>
                    <tr>
                        <td style="font-weight: 700;">文件类型</td>
                        <td style="font-weight: 700;">文件名称</td>
                        <td style="font-weight: 700;">是否需要盖章</td>
                        <td style="font-weight: 700;">盖章类型</td>
                        <td style="font-weight: 700;">文件名称</td>
                    </tr>
                    <tr v-for="(fileitem,index) in filetable" :key="index">
                        <td >{{fileitem.yjlx}}</td>
                        <td>{{fileitem.wjmc}}</td>
                        <td>{{fileitem.sfgz}}</td>
                        <td>{{fileitem.gzlx}}</td>
                        <td>{{fileitem.yjbz}}</td>
                    </tr>
                </table>
                <table class="table-1">
                    <tr><td colspan="4"></td></tr>
                    <tr><td colspan="4" style="font-weight: 700;">审批意见</td></tr>
                    <tr v-for="(item,index) in tableData" :key="index">
                        <td style="text-align: right;font-weight: 700;">{{item.spyjmc}}:</td>
                        <td colspan="3">
                            {{ item.spyj }}
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
import print from 'vue-print-nb'
import { dydetails,wtdwlist } from '@/api/index';

export default {
    data: function () {
        return {
            printObj: {
                id: 'print-content',
                // popTitle: '测试表单', // 如果不设置 默认是没有值即 undifined
            },
            gdform: {},
            projectdetail: {},
            tableData: [],
            fileform: {},
            form: {},
            filetable: [],
            wtdwlists: [],//委托单位
            wtdwform: {
                create_time: '',//创建时间 ,
                current: 1,//第几页 ,
                dwbh: '',//单位编号 ,
                dwmc: '',//单位名称 ,
                id: '',//id ,
                lxdh: '',// 联系电话 ,
                lxr: '',//联系人 ,
                pageSize: 999,//每页数量 ,
                status_code: 1,//1正常 2删除
                tght: '',//托管合同 ,
                yyzz: '',//营业执照
            },
        };
    },
    directives: {
        print
    },
    methods: {
        dydetails(data) {
            dydetails(data).then((res) => {
                console.log('res', res)
                this.projectdetail = res.data.processtableInfo;//基础数据
                this.filetable=res.data.fileList;//文件数据
                this.tableData=res.data.spyjList;//审批意见
                let strdata=this.wtdwlists.find(item=>{
                    return item.id==this.projectdetail.str
                })
                this.projectdetail.strval=strdata.dwmc

                let xqstrdata=this.wtdwlists.find(item=>{
                    return item.id==this.projectdetail.xqstr
                })
                this.projectdetail.xqstrval=xqstrdata.dwmc
            });
        },
        // 委托单位列表
        wtdwlist(data) {
            wtdwlist(data).then((res) => {
                if (res.code == 200) {
                    this.wtdwlists = res.data.records;
                }
            });
        }
    },
    mounted() {
        let data = {
            id: this.$route.query.id
        };
        this.dydetails(data);
        this.wtdwlist(this.wtdwform)
    }
};
</script>

<style scoped>
/* @page {
    size: auto;
    margin: 0mm;
} */
</style>
<style>
@media print {
    @page {
        size: A4;
        margin: 8mm 20mm 4mm;
    }
    body,
    html,
    div {
        height: auto !important;
    }
    body {
        width: 100%;
        /* zoom:75% */
    }
}
table {
    width: 100%;
    margin: auto;
    text-align: center;
}

.table-1 {
    border: 1px solid #abacae;
    border-collapse: collapse;
    /*合并相邻表格的间距*/

}

.table-1 tr,
.table-1 td {
    font-size: 13px;
    border-collapse: collapse;
    border: 1px solid #abacae;
    padding: 10px;
    box-sizing: border-box;
    color: #606266;
}
</style>